<template>
  <div>
    <van-button  to="addition" class="addGoods" >添加</van-button>
      <form action="/">
        <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            @search="onSearch"
            @cancel="onCancel"
        />
    </form>
    <van-row type="flex" justify="space-around" class="juli" v-if="!resultVisible">
      <van-col span="6">搜索历史</van-col>
      <van-col span="6"></van-col>
      <van-col span="6"><i class="van-icon van-icon-delete" @click="deleteHistory"></i></van-col>
    </van-row>
    <!-- 搜索结果 -->
     <van-swipe-cell v-for="item in searchlist" :key="item.id" v-else>
      <van-cell :border="false" :title="item.name" :value="'商品上架时间:'+item.ctime.split('T')[0]"/>
      <template slot="right">
      <van-button square type="danger" text="删除" @click="removeItem(item.id)" />
      </template>
    </van-swipe-cell>
    <!-- 搜索历史目录 -->
    <template>
      <div v-for="(item1,index) in yzysb" :key="index" ref="loginFormRef" v-show="one">
        <van-tag class="searchistory">{{item1}}</van-tag>
      </div>
    </template>
  </div>

</template>

<script>
import axios from 'axios'

import { Dialog } from 'vant'

export default {
  data () {
    return {
      searchlist: [],
      yzysb: [],
      value: '',
      resultVisible: false,
      one: true,
      oldHistory: []
    }
  },
  created () {
    this.getSearch()
    this.getHistoryList()
  },
  // mounted (){
  //   this.getHistoryList()
  // },
  methods: {
    getSearch () {
      axios.get('api/getprodlist')
        .then(res => {
          this.searchlist = res.data.message
        })
        .catch(res => console.log(res))
    },
    onSearch () {
      this.resultVisible = true
      this.yzysb.push(this.value)
      this.getSearch()
      this.one = false
      window.localStorage.setItem('searchHistory', JSON.stringify({
        data: this.yzysb
      }))
      window.localStorage.setItem('oldSearchHistory', JSON.stringify({
        data: this.yzysb
      }))
    },
    onCancel () {
      this.resultVisible = false
      this.one = true
      var he = window.localStorage.getItem('searchHistory')
      console.log(JSON.parse(he))
      this.yzysb = JSON.parse(he).data
      console.log(this.yzysb)
    },
    // 删除搜索商品
    removeItem (id) {
      Dialog.confirm({
        title: '警告',
        message: '是否确认删除该商品'
      }).then(() => {
        // on confirm 确认删除
        axios.get('api/delproduct/' + id)
          .then(res => {
            axios.get('api/getprodlist')
              .then(res => {
                this.searchlist = res.data.message
              })
              .catch(res => console.log(res))
          }).catch(() => {
          })
      }).catch(() => {
        this.$notify({ type: 'danger', message: '取消操作成功' })
      })
    },
    // 清空搜索历史
    deleteHistory () {
      this.yzysb = []
      window.localStorage.setItem('oldSearchHistory', JSON.stringify({
        data: []
      }))
      window.localStorage.setItem('searchHistory', JSON.stringify({
        data: []
      }))
    },
    Addition () {
      console.log(123)
      this.$router.path('/addition')
    },
    getHistoryList () {
      this.yzysb = JSON.parse(window.localStorage.getItem('oldSearchHistory')).data
      console.log(this.yzysb)
    }
  }
}
</script>
<style scoped lang="less">
.addGoods{
  position: fixed;
    top: 0;
    margin-right:-12px;
    font-size: 14px;
    color: #fff;
    right: 10px;
    z-index: 2;
    width:80px;
    background-color: #1989FA;
    border:0;
}
.van-tag{
  margin:0 10px;
}
.van-icon-delete{
  left: 90px;
}
.van-search {
  margin-top: 45px;
}
</style>
